<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>03-使用组件改造TodoList</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model='inputValue'>
		<button v-on:click="submit">提交</button>
		<!-- <ul>
			<li v-for="item in list">{{item}}</li>
		</ul> -->
		<ul>
			<todo-item v-for="item in list"
					   v-bind:content="item">
			</todo-item>
		</ul>
	</div>
</body>
<script>
//全局组件
// Vue.component('TodoItem',{
// 	props:['content'],
// 	template:"<li>{{content}}</li>"
// })
// var app=new Vue({
// 	el:'#app',
// 	data:{
// 		list:[],
// 		inputValue:'',
// 	},
// 	methods:{
// 		submit:function(){
// 			this.list.push(this.inputValue);
// 			this.inputValue="";
// 		}
// 	}
// })

//局部组件
var TodoItem={
	props:['content'],
	template:"<li>{{content}}</li>"
}
var app=new Vue({
	el:'#app',
	components:{
		TodoItem:TodoItem
	},
	data:{
		list:[],
		inputValue:'',
	},
	methods:{
		submit:function(){
			this.list.push(this.inputValue);
			this.inputValue="";
		}
	}
})

</script>
</html>